<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
   <meta charset="utf-8" />
   <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <!-- Mobile viewport optimized: h5bp.com/viewport -->
   <meta name="viewport" content="width=device-width">

   <title>BootMetro Documentation - Docs</title>

   <meta name="robots" content="noindex, nofollow">
   <meta name="description" content="BootMetro : Simple and complete web UI framework to create web apps with Windows 8 Metro user interface." />
   <meta name="keywords" content="bootmetro, modern ui, modern-ui, metro, metroui, metro-ui, metro ui, windows 8, metro style, bootstrap, framework, web framework, css, html" />
   <meta name="author" content="AozoraLabs by Marcello Palmitessa"/>
   
   <!-- remove or comment this line if you want to use the local fonts -->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-responsive.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-icons.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-ui-light.css">
   <link rel="stylesheet" type="text/css" href="assets/css/datepicker.css">

   <!--  these two css are to use only for documentation -->
   <link rel="stylesheet" type="text/css" href="assets/css/docs.css">
   <link rel="stylesheet" type="text/css" href="assets/js/google-code-prettify/prettify.css" >

   <!-- Le fav and touch icons -->
   <link rel="shortcut icon" href="assets/ico/favicon.ico">
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
   <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
  
   <!-- All JavaScript at the bottom, except for Modernizr and Respond.
      Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
      For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
   <script src="assets/js/modernizr-2.6.2.min.js"></script>

   <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3182578-6']);
      _gaq.push(['_trackPageview']);
      (function() {
         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
   </script>
</head>

<body class="bs-docs-docs" data-spy="scroll" data-target=".bs-docs-sidebar">
   <!--[if lt IE 7]>
   <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
   <![endif]-->

   <!-- Navbar
     ================================================== -->
   <div class="navbar metro-navbar navbar-fixed-top">
      <div class="navbar-inner">
         <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
            </button>
            <h1 class="brand"><a href="./index.html">BootMetro</a> <small>documentation</small></h1>
            <div class="nav-collapse collapse">
               <ul class="nav">
                  <li class="active">
                     <a href="./docs-index.html">Home</a>
                  </li>
                  <li class="">
                     <a href="./docs-css.html">Basic CSS</a>
                  </li>
                  <li class="">
                     <a href="./docs-icons.html">Icons</a>
                  </li>
                  <li class="">
                     <a href="./docs-standard-components.html">Standard Components</a>
                  </li>
                  <li class="">
                     <a href="./docs-advanced-components.html">Advanced Components</a>
                  </li>
                  <li class="">
                     <a href="./docs-javascript.html">Javascript</a>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </div>

   <div id="alerts-container"></div>

   <div id="doc-container" class="container">
      <div class="row">
         <div class="bs-docs-sidebar span3">
<ul class="nav metro-nav-list bs-docs-sidenav">
   <li><a href="#getting-started">Getting started</a></li>
   <li><a href="#browsers">Browsers support</a></li>
   <li><a href="#file-structure">File structure</a></li>
   <li><a href="#howtobuild">Building from source</a></li>
   <li>
      <a href="#toc">Documentation Index</a>
   </li>
</ul>
         </div>

         <div class="bs-docs-container span9">

<div class="bs-docs-section-header" id="welcome">
   <h1>BootMetro Documentation</h1>
   <p class="lead">This is the right place where to find all the stuff needed to build a Metro web application.</p>
</div>

<div class="bs-docs-section">
   <div class="page-header">
      <h1 id="getting-started">Getting started</h1>
   </div>

   <p class="lead">
      There are a few easy ways to quickly get started with BootMetro, please read through.
   </p>

   <div class="row-fluid">
      <div class="span6">
         <h3>
            Compiled CSS and JS
         </h3>
         <p>
            <strong>The fastest way to get started:</strong> get the compiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source files are included.
         </p>
         <p>
            <a href="#" class="btn btn-large btn-primary btn-block">
               Download BootMetro
               <i class="icon-download-2"></i>
            </a>
         </p>
      </div>
      <div class="span6">
         <h3>
            Latest source code
         </h3>
         <p>
            Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.
         </p>
         <p>
            <a href="#" class="btn btn-large btn-block">
               Download BootMetro source
               <i class="icon-download-2"></i>
            </a>
         </p>
      </div>
   </div>

   <div class="row-fluid">

      <div class="span6">
         <h3>
            Clone or fork via GitHub
         </h3>
         <p>
            Clone the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.
         </p>
         <p>
            <a href="https://github.com/aozora/bootmetro" class="btn btn-info btn-large btn-block">
               GitHub repository
               <i class="icon-github"></i>
            </a>
         </p>
      </div>
      <div class="span6">
         <h3>
            View the demo pages
         </h3>
         <p>
            View pages where all different kind of Metro stuff is used, and that you can reuse yourself.
         </p>
         <p>
            <a href="./demo-hub.html" class="btn btn-success btn-large btn-block">
               Demo Pages
               <i class="icon-eye-3"></i>
            </a>
         </p>
      </div>
   </div>

</div>


<!-- Browsers
================================================== -->
<div class="bs-docs-section">
   <div class="page-header">
      <h1 id="browsers">Browsers support</h1>
   </div>

   <p class="lead">
      BootMetro support the following browsers:
      <ul id="browsers" class="inline">
         <li>
            <i class="icon-chrome"></i>
         </li>
         <li>
            <i class="icon-firefox"></i>
         </li>
         <li>
            <i class="icon-opera"></i>
         </li>
         <li>
            <i class="icon-safari"></i>
         </li>
         <li>
            <i class="icon-IE"></i> (latest versions)
         </li>
      </ul>
   </p>

</div>




<!-- File structure
================================================== -->
<div class="bs-docs-section">
   <div class="page-header">
      <h1 id="file-structure">File structure</h1>
   </div>
   <p class="lead">Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.</p>
   <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
<pre class="prettyprint">
  bootmetro/
  └── assets/
        │
        ├── css/
        │   ├── bootmetro.css
        │   ├── bootmetro-icons.css
        │   ├── bootmetro-responsive.css
        │   ├── bootmetro-ui-light.css
        │   ├── bootmetro.min.css
        │   ├── bootmetro-icons.min.css
        │   ├── bootmetro-responsive.min.css
        │   └── bootmetro-ui-light.min.css
        │
        ├── font/
        │   ├── IcoMoon.eot
        │   ├── IcoMoon.svg
        │   ├── IcoMoon.ttf
        │   ├── IcoMoon.woff
        │   ├── LICENSE.txt
        │   ├── opensans-bold-webfont.eot
        │   ├── opensans-bold-webfont.svg
        │   ├── opensans-bold-webfont.ttf
        │   ├── opensans-bold-webfont.woff
        │   ├── opensans-light-webfont.eot
        │   ├── opensans-light-webfont.svg
        │   ├── opensans-light-webfont.ttf
        │   ├── opensans-light-webfont.woff
        │   ├── opensans-regular-webfont.eot
        │   ├── opensans-regular-webfont.svg
        │   ├── opensans-regular-webfont.ttf
        │   ├── opensans-regular-webfont.woff
        │   ├── opensans-semibold-webfont.eot
        │   ├── opensans-semibold-webfont.svg
        │   ├── opensans-semibold-webfont.ttf
        │   └── opensans-semibold-webfont.woff
        │
        └── js/
             ├── bootstrap.js
             ├── bootstrap.min.js
             ├── bootmetro-panorama.js
             ├── bootmetro-pivot.js
             └── bootmetro-icons-ie7.js
</pre>
   <p>This is the most basic form of BootMetro: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootmetro-*.*</code>), as well as compiled and minified CSS and JS (<code>bootmetro.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
   <p>Please note that all JavaScript plugins require jQuery to be included.</p>
</div>


<!-- Build from source
================================================== -->
<div class="bs-docs-section">
   <div class="page-header">
      <h1 id="howtobuild">Building from source</h1>
   </div>

   <h2 id="prepare-env">Prepare your environment</h2>
   <p>
      <ul>
         <li>Install <a href="http://nodejs.org/">Node.js</a> and NPM (should come with)</li>
         <li>Install global dev dependencies: <code>npm install -g grunt-cli karma</code></li>
         <li>Instal local dev dependencies: <code>npm install</code> while current directory is bootmetro repo</li>
      </ul>
   </p>

   <h2 id="build">Build</h2>
   <p>To build the whole project run <code>grunt</code></p>
</div>


         </div>
      </div>
   </div>


   <a class="bs-docs-top affix" href="#welcome">Back to top</a>

   <footer class="bs-docs-footer">
      <div class="container">
         <p>Designed and built by <a target="_blank" href="https://twitter.com/aozoralabs">@aozoralabs</a>.</p>
         <p>Code licensed under <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a> or <a target="_blank" href="http://www.gnu.org/licenses/gpl-2.0.html">GPL2</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
      </div>
   </footer>

   <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script>window.jQuery || document.write("<script src='assets/js/jquery-1.8.3.min.js'>\x3C/script>")</script>

   <!--[if IE 7]>
   <script type="text/javascript" src="scripts/bootmetro-icons-ie7.js">
   <![endif]-->

   <script type="text/javascript" src="assets/js/google-code-prettify/prettify.js"></script>
   <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="assets/js/bootmetro-panorama.js"></script>
   <script type="text/javascript" src="assets/js/bootmetro-pivot.js"></script>
   <script type="text/javascript" src="assets/js/bootmetro-charms.js"></script>
   <script type="text/javascript" src="assets/js/bootstrap-datepicker.js"></script>
   <script type="text/javascript" src="assets/js/holder.js"></script>
   <script type="text/javascript" src="assets/js/Chart.min.js"></script>

   <script type="text/javascript" src="assets/js/docs.js"></script>
</body>
</html>
